import React, { Component, Fragment } from 'react';
import { Form, Card, Button, Spin } from 'antd';
import { connect } from 'dva';
import AdButton from '@/components/AdButton';
import DetailPage from '@/components/DetailPage';
import { codes, renderTableAdSelect, allDispatchType } from './utils';
import { allDictList } from '@/utils/constans';
import { formItemFragement, queryDict } from '@/utils/common';
import StandardTable from '@/components/StandardTable';
import styles from './index.less';

@connect(({ PartsLib, component, loading }) => ({
  PartsLib,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detail],
  loadingTable: loading.effects[allDispatchType.suppliersList],
}))
@Form.create()
export default class DetailsInfo extends Component {
  state = {};
  componentWillMount() {
    const allDict = [allDictList.currencyType, allDictList.partsType, allDictList.partsUnit];
    queryDict({ props: this.props, allDict });
  }

  columns = [
    {
      title: '供应商名称',
      dataIndex: 'mdsCompanyName',
    },
    {
      title: '品牌',
      dataIndex: 'trademark',
    },
    {
      title: '报价',
      dataIndex: 'price',
      render: text => <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : text}</span>,
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
    {
      title: '质保(月)',
      dataIndex: 'warranty',
    },
    {
      title: '行驶公里',
      dataIndex: 'drvingKm',
    },
  ];

  //删除：
  removeData = () => {
    const { removeData, id } = this.props;
    removeData();
  };
  //编辑：
  editOperate = () => {
    const { setModalDetails } = this.props;
    setModalDetails();
  };

  /**
   * table 表格 分页操作
   */
  handleStandardTableChange = param => {
    const { dispatch, id } = this.props;
    param.id = id;
    dispatch({
      type: allDispatchType.suppliersList,
      payload: param,
    });
  };

  render() {
    const {
      visible,
      form: { getFieldDecorator },
      PartsLib: { partsDetails, partsSuppliersList },
      id,
      handleType,
      loading,
      loadingTable,
    } = this.props;

    const modeEdit = handleType == 'edit' ? true : false;
    const detail = modeEdit && partsDetails[id] ? partsDetails[id] : {};
    // console.log('detail', detail);

    const extraButtons = (
      <>
        <AdButton
          onClick={() => this.removeData()}
          ghost
          text="删除"
          code={codes.remove}
          type="danger"
        />
        <AdButton
          style={{ marginLeft: 8 }}
          onClick={() => this.editOperate()}
          type="primary"
          text="编辑"
          code={codes.edit}
        />
      </>
    );
    let parenPartsName = detail.parenPartsName1;
    parenPartsName = detail.parenPartsName2
      ? `${parenPartsName}/${detail.parenPartsName2}`
      : parenPartsName;
    parenPartsName = detail.parenPartsName3
      ? `${parenPartsName}/${detail.parenPartsName3}`
      : parenPartsName;

    const formItem = [
      [<DetailPage label="上级" value={parenPartsName} />],
      [<DetailPage label="编号" value={detail.allParentNos} />],
      [
        <DetailPage
          label="类型"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.type,
            key: allDictList.partsType,
          })}
        />,
      ],
      [<DetailPage label="配件名称1" value={detail.partsName1} />],
      [<DetailPage label="配件名称2" value={detail.partsName2} />],
      [<DetailPage label="配件名称3" value={detail.partsName3} />],
      [
        <DetailPage
          label="单位"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.unit,
            key: allDictList.partsUnit,
          })}
        />,
      ],
    ];

    return (
      <div className={styles.partsLib_DetailInfo}>
        <Card type="inner" title="配件详情" extra={extraButtons}>
          <Card>
            <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
          </Card>
          {partsSuppliersList.list && partsSuppliersList.list.length > 0 && (
            <Card style={{ marginTop: 10 }}>
              <StandardTable
                loading={loadingTable}
                data={partsSuppliersList}
                columns={this.columns}
                scrollY={200}
                onPaginationChange={this.handleStandardTableChange}
                disabledRowSelected={true}
              />
            </Card>
          )}
        </Card>
      </div>
    );
  }
}
